<!-- <!DOCTYPE html> -->

<html>
<head>
<meta charset="utf-8">
<title>程董的红包</title>
<link rel="stylesheet" type="text/css" href="../../css/hc/chatwall.css">
<link rel="stylesheet" type="text/css" href="../../css/hc/bossshowofz.css">
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css">
<style>
    
</style>
</head>
<body class="" style="background: url(../../img/newrd/padbg1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;">
    <div class="" style="height: auto;position: absolute;width: 100%;">
        <!-- <div style="text-align: center;margin-top: 2%;margin-bottom: 20px;">
            <span style="font-size: 40pt;color: red;">程董的红包</span>
        </div> -->
        <!-- 记录消息数量和中奖人员名单 -->
        <div style="width: 100%;height:60px;margin:auto;text-align: center;z-index: 999;">
            <span id="repacketcount" style="z-index: 2; font-size: 20pt;color: yellow;position: absolute;margin-top: 85px;margin-left: 90px;">0</span>
            <div style="width: 100%;padding-top: 80px;">
                <div style=" z-index: 2;color: white;font-size: 25pt;font-family:'隶书'">程董的宝库还剩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个</div>

                 
            </div>
        </div>
    </div>
    <div style="width:100%;height: 100%;text-align: center;"><!-- /*background: #EEEEEE*/ -->

        <img class="rba" style="" src="../../img/newrd/1.png">
        <img class="rbb" style="" src="../../img/newrd/2.png">
<!-- middle -->
        <img class="rbc" style="" src="../../img/newrd/3.png">
        <img class="rbe" style="" src="../../img/newrd/4.png">

        <img class="rbf" style="" src="../../img/newrd/5.png">
        <img class="rbg" style="" src="../../img/newrd/3.png">
        
    </div>
    <div id="mainIP" hidden="hidden"><%=httpUrl%>|<%=socketUrl%></div>
</body>
<script src="../../js/jquery.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<!-- <script src="../../js/hc/chatwall.js"></script>  -->
<script type="text/javascript">
    var connectIP = $("#mainIP").html();
    var ip =connectIP.split("|")[0];
    var socketUrl=connectIP.split("|")[1];
    // 主监听socket   用来控制 次监听socket
    var mainSocket='';
    var mainUrl= socketUrl +'mainsocket';
    $(function() {
        mainWebSocket();
        getDate();
        setInterval(getDate, 1000);
        // addcssFun();
    })
    // 连接mainWebSocket  服务
    function mainWebSocket(){
        if ('WebSocket' in window)
            mainSocket = new WebSocket(mainUrl);
        else if ('MozWebSocket' in window)
            mainSocket = new MozWebSocket(mainUrl);
        //打开连接时触发
        mainSocket.onopen = function() {
            console.log('OPEN: ' + mainSocket.protocol);
        };
        //收到消息时触发
        mainSocket.onmessage = function(message) {
            console.log("mainsocket收到消息了"+message);
            var string = message.data.split(":");
            var objMsg = string[0];
            var controlMsg = string[1];
            if(objMsg == "red"){
                if(controlMsg == "chen")
                    addcssFun();
            }
        };  
    }
    function getDate(){
        $.ajax({
            url:ip+'redpacket/numofbossaward',
            type:'get',
            async:false,
            data:{name:"chen"},
            dataType:'json',
            success:function(data){
                
                
                $("#repacketcount").html(data.size);
            },
            error:function(){
                console.log("获取数量失败");
            }
        })
    }
    function addcssFun() { 
        $("#repacketcount").css({
            "animation": "bgnum 2s infinite" 
        })
        $(".rba").css({
            "animation": "rbaa 5s infinite" 
        })
        $(".rbb").css({
            "animation": "rbba 6s infinite" 
        })
        $(".rbc").css({
            "animation": "rbca 7s infinite"
        })
        $(".rbd").css({
            "animation": "rbda 5s infinite" 
        })
        $(".rbe").css({
            "animation": "rbea 4s infinite" 
        })
        $(".rbf").css({
            "animation": "rbfa 3s infinite"
        })
        $(".rbg").css({
            "animation": "rbga 4s infinite"
        })

    }

</script>
</html>
